<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #app{
            width: 300px;
            border: 1px solid green;
            padding: 30px;
        }
        table{
            margin-top: 20px;
            border-collapse: collapse;
            border: 1px solid black;
        }
        .top{
            background-color: #4c83d6;
            color: #fff;
        }
        td{
            line-height: 30px;
            padding: 0 20px;
            text-align: center;
        }
    </style>
</head>
<body>
    <div id="app">
        <div>
            搜索名称: <input type="text" v-model="msg" >
        </div>
        <table>
            <tr class="top">
                <td v-for="(item,key) in arr[0]">{{key|first}}</td>
            </tr>
            <tr v-for="(item,index) in getName">
                <td>{{item.name}}</td>
                <td>{{item.gender}}</td>
                <td>{{item.age}}</td>
            </tr>
        </table>
    </div>
</body>
<script src="js/vue.js"></script>
<script>
    let vm = new Vue({
        el:"#app",
        data:{
            arr:[
                {name:"rick",gender:"male",age:21},
                {name:"demen",gender:"male",age:26},
                {name:"Jack",gender:"male",age:26},
                {name:"John",gender:"female",age:20},
                {name:"Lucy",gender:"female",age:16},
            ],
            msg:''
        },
        filters:{
            first(val){
                // console.log(val.charAt(0).toUpperCase());
                return val.charAt(0).toUpperCase() + val.slice(1)
            }
        },
        computed:{
            getName(){
                if(this.msg=='') return
                let listArr = []
                let reg = new RegExp(this.msg,'ig')
                this.arr.forEach(item=>{
                    if(reg.test(item.name)){
                        listArr.push(item)
                    }
                })
                return listArr
            }
        }
    })
</script>
</html>